<template>
  <FetchList
    ref="fetchList"
    @change="handleListChange"
    :api="api"
    :params="{
      status: type,
      yyyyMM,
    }"
    :activeNav="activeNav"
    :isStopLoad="activeNav !== type"
    :reachBottomTime="reachBottomTime"
    :pullDownRefreshTime="pullDownRefreshTime"
    :coverRefreshTime="coverRefreshTime"
    pageSize="1000"
    :showNoMore="false"
    height="calc(100vh - 60px - 52px - 20px)"
  >
    <List
      :list="list"
      @change="handleItemChange"
      @showModel="config=> $emit('showModel', config)"
      @showTips="config=> $emit('showTips', config)"
    />
  </FetchList>
</template>

<script>
import FetchList from '@/components/FetchList'
import List from './List'
import api from '@/api'
import { formatDate } from '@/utils'

export default {
  components: {
    FetchList,
    List,
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    activeNav: {
      type: String,
      required: true,
    },
    reachBottomTime: {
      type: String,
      required: true,
    },
    pullDownRefreshTime: {
      type: String,
      required: true,
    },
    coverRefreshTime: {
      type: String,
      required: true,
    },
    yyyyMM: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      api: api.getTodoList,
      list: [],
    }
  },
  watch: {
    yyyyMM () {
      setTimeout(() => {
        console.log('yyyyMM change')
        this.$refs.fetchList.$focusRefresh()
      }, 20)
    },
  },
  methods: {
    handleListChange (list) {
      this.list = this.dealList(list)
    },
    dealList (list) {
      return list.map(item => {
        const data = new Date(item.startTime).getDate()
        item.time = {
          month: formatDate(new Date(item.startTime), 'yy-MM'),
          date: data < 10 ? '0' + data : data,
          day: `星期${['一', '二', '三', '四', '五', '六', '日'][new Date(item.startTime).getDay() - 1]}`,
        }

        if (item.startTime) {
          const startTime = formatDate(new Date(item.startTime), 'HH:mm')
          let endTime
          if (formatDate(new Date(item.startTime), 'yyyy-MM-dd') === formatDate(new Date(item.endTime), 'yyyy-MM-dd')) {
            endTime = formatDate(new Date(item.endTime), 'HH:mm')
          } else {
            endTime = formatDate(new Date(item.endTime), 'MM-dd HH:mm')
          }
          item.showTime = startTime + ' ~ ' + endTime
        } else {
          item.showTime = ''
        }

        return item
      })
    },
    handleItemChange (item) {
      const findItem = this.list.find(item2 => item.id === item2.id)
      Object.assign(findItem, item)
    },
  },
}
</script>
